<template>
  <Middle class="middle">
    <Aside class="aside">
      <Info></Info>
      <Swiper style="margin-top: 10px;"></Swiper>
    </Aside>
    <Main class="main">
      <!--主体区域-->
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="文章" name="first">
            <List></List>
          </el-tab-pane>
          <el-tab-pane label="专栏" name="two" lazy>
            <Classify></Classify>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </Main>
  </Middle>
</template>

<script>
import Aside from '@/views/layout/Aside';
import Header from '@/views/layout/Header';
import Nav from '@/views/layout/Nav';
import Main from '@/views/layout/Main';
import Footer from '@/views/layout/Footer';
import List from '@/views/front/article/List';
import Swiper from '@/views/layout/components/Swiper';
import Info from '@/views/layout/components/Info';
import Classify from './classify/classify';
import Middle from '../layout/Middle';

export default {
    components: {Middle, Swiper, Classify, Info, Header, Aside, Nav, Main, Footer, List},
  name: 'Home',
  data() {
    return {
      activeName: 'first',
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped lang="less">
.middle{
  display: flex;
}

@media screen and (max-width: 1024px) {
  .middle{
    display: block;
  }
  .swiper {
    display: none;
  }
}
</style>
